import React, { useState, useCallback, useEffect } from 'react'
import { View, Text, Image, Input, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './updateMessage.scss'
import { updateMessageRequest, getUserinfoRequest } from '../../utils/api'
import Navbar from '../../components/navbar/navbar'


const FormItem = ({ label, value = '', isRequire = true, placeholder, InputChange }) => {
  placeholder = `请输入${label}`

  const handleInputChangeComponent = (e) => {
    InputChange(e)
  }

  return <View className="form-item">
    <View className="form-header">
      <View className="form-label">{label}</View>
      {isRequire ? <View className="form-require">*</View> : null}
    </View>
    <Input value={value || ''} placeholder={placeholder} className="valueinp" onInput={handleInputChangeComponent}></Input>
  </View>
}

const updateMessage = () => {
  const [userinfo, setUserinfo] = useState({
    nickname: '',
    avatar: '',
    mobile: '',
    address: []
  })



  const InputChange = useCallback((e, key) => {
    setUserinfo(userinfo => {
      let obj = Object.assign({}, userinfo)
      if (key == 'address') {
        obj.address = [e.detail.value]
      } else {
        obj[key] = e.detail.value
      }
      return obj
    })
  }, [userinfo])

  const submitButton = useCallback(async () => {

    console.log(userinfo, 'submitButton')
    const res = await updateMessageRequest(userinfo)
    if (res.data.code === 200) {
      Taro.showToast({
        title: '编辑成功'
      })

      Taro.navigateBack()
    } else {
      Taro.showToast({
        title: res.data.message,
        icon: 'none'
      })
    }

  }, [userinfo])

  const uploadImage = useCallback(() => {
    Taro.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        var tempFilePaths = res.tempFilePaths
        setUserinfo(userinfo => {
          let obj = Object.assign({}, userinfo)
          obj.avatar = tempFilePaths[0]
          return obj
        })
      }
    })
  }, [userinfo])

  const closeAvatar = useCallback((e) => {
    e.stopPropagation()
    setUserinfo(userinfo => {
      let obj = Object.assign({}, userinfo)
      obj.avatar = ''
      return obj
    })
  }, [userinfo])

  useEffect(() => {
    (async () => {
      const res = await getUserinfoRequest()
      if (res.data.code === 200) {
        setUserinfo(res.data.data)
      }
    })()

  }, [])



  return <>
    <Navbar />
    <View className="container">
      <View className="avatarinfo" onClick={uploadImage}>
        <View className="text">
          <Text>头像</Text>
          <Text>点击可上传头像</Text>
        </View>
        <View className="avatar">
          <Image src={userinfo.avatar || 'https://cdn1.chinayarn.com/dsc/2020-09/img/Y0OhCphpPbz6Iq1599642674200909.png'} className="defaultimg" mode="widthFix" />
          {userinfo.avatar.length ? <Image src="https://cdn1.chinayarn.com/dsc/2020-09/img/BFChFphp3UDVSx1599643144200909.png" className="closeicon" onClick={closeAvatar} /> : null}
        </View>
      </View>
      <FormItem label='昵称' value={userinfo.nickname} InputChange={(e) => InputChange(e, 'nickname')}></FormItem>
      <FormItem label='手机号' value={userinfo.mobile} InputChange={(e) => InputChange(e, 'mobile')}></FormItem>
      <FormItem label='地址' value={userinfo.address[0]} InputChange={(e) => InputChange(e, 'address')}></FormItem>
      <Button className="update-btn" onClick={submitButton}>更新资料</Button>
    </View>
  </>
}

export default updateMessage